import { defineStore } from 'pinia'
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { debounce } from 'lodash'

export const useDeviceStore = defineStore('device', () => {
  const isMobile = ref(window.innerWidth <= 1200)

  const checkMobile = () => {
    isMobile.value = window.innerWidth <= 1200
  }

  const debouncedCheckMobile = debounce(checkMobile, 5)

  onMounted(() => {
    window.addEventListener('resize', debouncedCheckMobile)
    watch(isMobile, (val) => {
      console.log(val)
    })
  })
  onUnmounted(() => {
    window.removeEventListener('resize', debouncedCheckMobile)
  })

  return {
    isMobile,
  }
})
